<template>
  <div class="mz-antd-pagination">
    <a-pagination
        v-model="current"
        :page-size-options="pageSizeOptions"
        :total="total"
        show-size-changer
        :page-size="pageSize"
        @show-size-change="onShowSizeChange"
        @change="handlePageChange"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
</template>

<script>
export default {
  name:'Pagination',
  props: {
    total:{
      type: Number,
      default: 0
    },
    pageSizeOptions: {
      type: Array,
      default() {
        return ['10', '20', '30', '40', '50'];
      }
    },
  },
  data() {
    return {
      pageSize: 10,
      current: 1
    };
  },
  mounted() {

  },
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log('emit onShowSizeChange')
      this.pageSize = pageSize;
      this.current = current;
      this.$emit('onShowSizeChange', current, pageSize);
    },
    handlePageChange(page){
      console.log('handlePageChange',page)
      this.current=page
    }
  },
  watch: {
    current(val) {
      this.$emit('onShowSizeChange', val, this.pageSize);
    },
  },
};
</script>

<style scoped>
.mz-antd-pagination{
    text-align: right !important;
    margin-top: 20px !important;
  position: relative;
}
</style>
